<template>
	<!-- 潮联盟页面 -->
	<view class="content">
		<!-- 头部start -->
		<view class="top">
			<view class="top_box">
				<view class="top_box_left">
					<image class="tou" src="http://thirdwx.qlogo.cn/mmopen/9kibjKzqKf8H12BxOk7T3UeBIfichjsb0noOibrn3741aZumfU1TvN7bbO7rr81sLguKmb4grCj3vL5hafzECGHmS7YMNDNQp0f/132"></image>
				</view>
				<view class="top_box_right">
					<view class="name_box">
						<view class="name">
							白芷
						</view>
					</view>
					<view class="sle_box">
						<view class="sle_box_left">
							联盟等级：<view class="dengji">
								<text style="margin-left:35rpx;">一星</text>
								</view>
						</view>
						<view class="sle_box_right">
							<view class="yaoma">
								邀请码：272416            	
							</view>
						</view>
					</view>
					<view class="commis_btn">
						<view class="commis_btn_left">
								专属导师微信:
								<text @tap="getwx()">z13238330080</text>
						</view>
						<navigator class="commis_btn_right" hover-class="none" url="">潮人规则</navigator>
					</view>
					
				</view>
			</view>
		</view>
		<view class="gai_tp">
			<image class="gai_tp_img" src="../../static/logosm.png" mode="widthFix"></image>
			<view style="margin-left:5rpx;font-size: 24rpx;">下一等级:潮联盟2星 </view>
			<navigator hover-class="none" url="" class="gai_nav_a" style="font-size: 24rpx;">
				<image src="../../static/tpjian.png" class="tpjian_img" mode="widthFix"></image>当前等级:一星月工资200
			</navigator>
		</view>
		<!-- 头部end -->
		<view class="navloa_ul">
			<navigator hover-class="none" url="./zxsq" class="navloa_li">
				<image src="../../static/lianlist1.png" mode="widthFix" class="navloa_img"></image>
				<view class="navloa_text">
					最新申请
				</view>
			</navigator>
			<navigator hover-class="none" url="" class="navloa_li">
				<image src="../../static/lianlist2.png" mode="widthFix" class="navloa_img"></image>
				<view class="navloa_text">
					直系成员
				</view>
			</navigator>
			<navigator hover-class="none" url="" class="navloa_li">
				<image src="../../static/lianlist3.png" mode="widthFix" class="navloa_img"></image>
				<view class="navloa_text">
					联盟团队
				</view>
			</navigator>
			<navigator hover-class="none" url="" class="navloa_li">
				<image src="../../static/lianlist4.png" mode="widthFix" class="navloa_img"></image>
				<view class="navloa_text">
					 团队订单
				</view>
			</navigator>
		</view>
		<navigator hover-class="none" url="../mobile/haibaolist" class="bga_img_a">
		<image src="../../static/bga.png" class="bga_img" mode="widthFix"></image>
		</navigator>
		
		<!-- 收益数据start -->
		 <view class="label">
		        <view class="label_left">
		          <image src="../../static/b1.png" mode="widthFix"></image>
		          </view>
		          <view class="label_right">
		            <view class="label_right_ul">
		              <view class="label_li" v-for="(qiedate,index) in qiedate" :key="index">
		                <view :class="[qie_active ==index ? 'qie_active qie' : 'qie']" @tap="changeqiedate(index)">{{qiedate}}</view>
		                </view>
		              </view>
		            </view>
		        </view>
				 <view class="qian_box">
				        <view class="qian_box_tit">
				          收益总额(元)    
						   <navigator url="" hover-class="none" class="jmsl">余额转移</navigator>
				          </view>
				          <view class="qian_box_tit">
				            <span class="qian_box_tit2" id="total_num">0</span>
				            </view>
				            <view class="qian_box_ul">
				              <view class="qian_box_li" style="border-right: .01rem solid #adadad;">
				                <view class="qian_box_li_tit">
				                  可提现金额
				                  </view>
				               <navigator url="" hover-class="none">  
							   <view class="qian_box_li_span" id="tixian_num">
				                   0
				                    </view>
									</navigator> 
				                </view>
				                <view class="qian_box_li" style="border-right: .01rem solid #adadad;">
				                  <view class="qian_box_li_tit">
				                    待到账金额
				                    </view>
				                    <view class="qian_box_li_span" id="lock_num">0
				                      </view>
				                  </view>
				                  <view class="qian_box_li">
				                    <view class="qian_box_li_tit">
				                      其他金额
				                      </view>
				                      <view class="qian_box_li_span" id="other_num">
				                      0 
				                        </view>
				                    </view>
				            </view>
				        </view>
						<view class="slide_ul">
						        <view class="slide_li">
						          <navigator url="" hover-class="none" class="slide_ul_a slide_ul_a1">
						          <view class="slide_ul_div">
						            <view class="slide_ul_div_tit">
						              等级工资
						             </view>
						             <view class="slide_ul_div_span">
						            团队工资/雇员工资
						               </view>
						            </view>
						            </navigator>
						          </view>
						          <view class="slide_li">
						            <navigator url="" hover-class="none"  class="slide_ul_a slide_ul_a2">
						            <view class="slide_ul_div">
						              <view class="slide_ul_div_tit">
						                团队热销产品
						               </view>
						               <view class="slide_ul_div_span">
						              销售/拓展TOP榜
						                 </view>
						              </view>
						              </navigator>
						            </view>
						        </view>
		<!-- 收益数据end -->
		<!-- 潮人联盟start -->
		<view class="label">
		       <view class="label_left">
		         <image src="../../static/bb.png" mode="widthFix"></image>
		         </view>
		       </view>
			         <view class="ka_box">
			           	<view class="ka_ul">
			           		<view class="ka_li">
			           			<span class="ka_li_span"></span>
			           			<view class="ka_li_div"></view>
			           		</view>
			           			<view class="ka_li">
			           			<span class="ka_li_span"></span>
			           			<view class="ka_li_div"></view>
			           		</view>
			           			<view class="ka_li">
			           			<view class="ka_li_span"></view>
			           		</view>
			           	</view>
			           	<view class="ka_qie_ul">
			           		<view :class="[ka_qie_li_active==index ? 'ka_qie_li_active ka_qie_li' : 'ka_qie_li']" v-for="(yangqie,index) in yangqie" :key="index" @tap="changeyang(index)">
			           			{{yangqie}}
			           		</view>
			           	</view>
			           </view>
					   
					   <!-- 联盟条件 -->
					   <view v-if="ka_qie_li_active==0">
						     <view class="ka_box_huan">
						           	<view class="ka_box_huan_label">
						           		<view class="jds">驴友联盟</view>
						           		<view class="bof">优先权</view>
						           	</view>
						           	<view class="dfd_ul">
						           		<view class="dfs_li" style="white-space:nowrap">
						           			站长享优先加入权
						           		</view>
						           	</view>
						           	
						           		<view class="ka_box_huan_label">
						           		<view class="jds">必须大潮人</view>
						           		<view class="bof">申请权</view>
						           	</view>
						           	<view class="dfd_ul" style="border:none">
						           		<view class="dfs_li">
						           			团队人数不低于<text class="dh_color">500人</text>
						           		</view>
						           			<view class="dfs_li">
						           			直属下级不低于<text class="dh_color">500人</text>
						           		</view>
						           				<view class="dfs_li">
						           		月直属营业额不低于<text class="dh_color">10000</text>或累计营业额 不低于<span class="dh_color">500000</span>
						           		</view>
						           	</view>
						           	<view class="deefd">
						           		满足以上任意条件即可申请加入联盟<br/>特别注意:联盟工资奖励可以和其他奖励累加享受
						           	</view>
						           </view>
					   </view>
						<!-- 联盟权益 -->
					   <view v-if="ka_qie_li_active==1">
						  <view class="ka_box_huan">
							  	<view class="dc_label">
									<text class="dw_span"></text>潮人权益
									</view>
							          	<view class="dc_ul">
							          		<view class="dc_li">
							          			<view class="dc_li_tit">独立结算/团队</view>
							          			<view class="dc_li_span">独立不分家 <br/>收益更可观</view>
							          		<image src="../../static/cv.png" class="cv_img" mode="widthFix"></image>
							          		</view>
							          			<view class="dc_li">
							          			<view class="dc_li_tit">平台升级投票权</view>
							          			<view class="dc_li_span">线下活动/年会参与权 <br/>产品采购/项目分红</view>
							          		<image src="../../static/cv.png" class="cv_img" mode="widthFix"></image>
							          		</view>
							          				<view class="dc_li">
							          			<view class="dc_li_tit">平台优先运营</view>
							          			<view class="dc_li_span">当地优先  <br/>运营权</view>
							          			<image src="../../static/cv.png" class="cv_img" mode="widthFix"></image>
							          		</view>
							          	</view>
							
								<view class="dc_label">
									<text class="dw_span"></text>联盟权限
									</view>
							        	    	<view class="dfc_ul">
							        	    		<view class="dfc_li" style="    border-right: 2rpx solid #ccc;">
							        	    			<view class="dfc_li_left" >
							        	    				<image src="../../static/q1.png" mode="widthFix"></image>
							        	    			</view>
							        	    				<view class="dfc_li_right">
							        	    					<view class="dfc_li_right_tit">独立迁移打包所有</view>
							        	    					<view class="dfc_li_right_span">(锁粉会员/分销)</view>
							        	    				</view>
							        	    		</view>
							        	    				<view class="dfc_li">
							        	    			<view class="dfc_li_left" style="padding-left:20rpx">
							        	    			<image src="../../static/q2.png" mode="widthFix"></image>
							        	    			</view>
							        	    				<view class="dfc_li_right">
							        	    					<view class="dfc_li_right_tit">无限层收益更高  </view>
							        	    					<view class="dfc_li_right_span">商品可享独立结算价</view>
							        	    				</view>
							        	    		</view>
							        	    	</view>
							        	    	
							        	    		<view class="dfc_ul" style="border:none;margin-top:20rpx">
							        	    		<view class="dfc_li" style="    border-right: 2rpx solid #ccc;">
							        	    			<view class="dfc_li_left" >
							        	    				<image src="../../static/q3.png" mode="widthFix"></image>
							        	    			</view>
							        	    				<view class="dfc_li_right">
							        	    					<view class="dfc_li_right_tit">营销中心所有成员</view>
							        	    					<view class="dfc_li_right_span">显示联盟微信</view>
							        	    				</view>
							        	    		</view>
							        	    				<view class="dfc_li">
							        	    			<view class="dfc_li_left" style="padding-left:20rpx">
							        	    				<image src="../../static/q4.png" mode="widthFix"></image>
							        	    			</view>
							        	    				<view class="dfc_li_right">
							        	    					<view class="dfc_li_right_tit">文章发布权    </view>
							        	    					<view class="dfc_li_right_span">潮人学院/可得相应奖励中心所有成员</div>
							        	    				</view>
							        	    		</view>
							        	    	</view>
						  </view>
						  
						    	<view class="dc_label">
									<text class="dw_span"></text>公司补助
									</view>
						          	    	<view class="jy_ul">
						          	    		<view class="jy_li">
						          	    			<view class="jy_tit">每达一个等级可获 等级收益</view>
						          	    			<view class="jy_span">（共9个等级）</view>
						          	    		</view>
						          	    			<view class="jy_li">
						          	    			<view class="jy_tit">上升一等级拿等级奖励 上级大潮人额外得20%  </view>
						          	    			<view class="jy_span">（公司额外补贴）</view>
						          	    		</view>
						          	    				<view class="jy_li">
						          	    			<view class="jy_tit">最高可拿<text style="color:#fe4f95;">2888.88</text>元 累计可拿<text style="color:#fe4f95;">6879.92</text>元</view>
						 
						          	    		</view>
						          	    	</view>
											
												<view class="dc_label">
													<text class="dw_span"></text>不同等级享受
													</view>
											        	    		<view class="fvds">
											        	    			<view class="fvds_box">
											        	    				<view class="fvds_box_top">
											        	    					<view class="fvds_box_top_left">
											        	    						<view class="fvds_box_top_left_tit">9个</view>
											        	    							<view class="fvds_box_top_left_span">联盟等级</view>
											        	    					</view>
											        	    			    	<view class="fvds_box_top_right">
											        	    			    		<view class="fewf">
											        	    			    			<text class="fcvd"></text>
											        	    			    			不同等级收益/结算不同
											        	    			    		</view>
											        	    			    		<view class="fewf">
											        	    			    			<text class="fcvd"></text>
											        	    			    			等级越高支持越多
											        	    			    		</view>
											        	    			    	</view>
											        	    				</view>
											        	    				
											        	    						<view class="fvds_box_top">
											        	    					<view class="fvds_box_top_left">
											        	    						<view class="fvds_box_top_left_tit">不限</view>
											        	    							<view class="fvds_box_top_left_span">潮人直属数</view>
											        	    					</view>
											        	    			    	<view class="fvds_box_top_right">
											        	    			    		<view class="fewf">
											        	    			    			<text class="fcvd"></text>
											        	    			    			下级人数越多收益越大
											        	    			    		</view>
											        	    			    		<view class="fewf">
											        	    			    			<text class="fcvd"></text>
											        	    			    		上级潮人可看到下级所有微信号
											        	    			    		</view>
											        	    			    			<view class="fewf">
											        	    			    			<text class="fcvd"></text>
											        	    			    		所有下级出单/ 锁粉情况
											        	    			    		</view>
											        	    			    	</view>
											        	    				</view>
											        	    			</view>
											        	    		</view>
																	
																	
								<view class="dc_label"><text class="dw_span"></text>董事福利</view>
							        	    			<view class="dhsb">每个自然年中评级在
														<text class="dhsb_span">9级</text>
														联盟站且<text class="dhsb_span">8次</text>
														以上，自动成为潮人荟
														 <text class="dhsb_span">名誉董事</text>，
														 公司免费为其购买<text class="dhsb_span">
															 第二年整年5险1金</text>或兑换 相应现金，
															 并邀请出席总部年度规划会议</view>
															 
									
						</view>
					   </view>
					  <!-- 联盟收益 -->
					   <view v-if="ka_qie_li_active==2">
						   <view class="ka_box_huan">
							   	<view class="dc_label">
									<text class="dw_span"></text>联盟培育奖励
									</view>
							           		
							           		<view class="asd_div" style="padding:0">
							           			<view class="asd_div_left">
							           				<view class="asd_div_left_left">
													<image src="../../static/z1.png" mode="widthFix"></image>
							           					</view>
							           				<view class="asd_div_right_right">
							           					<view class="asd_div_right_right_tit">
							           						下级联盟 
							           					</view>
							           					<view class="asd_div_right_right_span">
							           						可拿原粉丝50%收益
							           					</view>
							           				</view>
							           				
							           			</view>
							           			<view class="asd_div_right">
							           					<view class="asd_div_left_left">
							           					<image src="../../static/z2.png" mode="widthFix"></image>
							           					</view>
							           				<view class="asd_div_right_right">
							           					<view class="asd_div_right_right_tit">
							           					下级联盟新增粉 
							           					</view>
							           					<view class="asd_div_right_right_span">
							           						5%总收益%收益
							           					</view>
							           				</view>
							           			</view>
							           		</view>
							           		
							           		 		<view class="asd_div">
							           			<view class="asd_div_left">
							           				<view class="asd_div_left_left">
							           					<image src="../../static/z3.png" mode="widthFix"></image>
							           					</view>
							           				<view class="asd_div_right_right">
							           					<view class="asd_div_right_right_tit">
							           					下下级联盟站
							           					</view>
							           					<view class="asd_div_right_right_span">
							           							总收益2% 
							           					</view>
							           				</view>
							           				
							           			</view>
							           			<view class="asd_div_right">
							           					<view class="asd_div_left_left">
							           					<image src="../../static/z4.png" mode="widthFix"></image>
							           					</view>
							           				<view class="asd_div_right_right">
							           					<view class="asd_div_right_right_tit">
							           					站长等级工资 
							           					</view>
							           					<view class="asd_div_right_right_span">
							           						上级站长额外获得50%
							           					</view>
							           				</view>
							           			</view>
							           		</view>
											
							<view class="dc_label">
								<text class="dw_span"></text>联盟收益</view>
						        			
						        			<view class="dsd_div">
						        				
						        				<view class="dsd_div_ul">
						        					<view class="dsd_div_li">
						        						<view class="dsd_div_li_box">
						        							<view class="dsd_div_li_box_tit">
						        								无限层级收益
						        							</view>
						        							<view class="dsd_div_li_box_span">
						        								会员+个人<br/> 直卖收益
						        							</view>
						        						</view>
						        					</view>
						        						<view class="dsd_div_li">
						        						<view class="dsd_div_li_box">
						        							<view class="dsd_div_li_box_tit">
						        								空档收益
						        							</view>
						        							<view class="dsd_div_li_box_span">
						        							未分出去的 <br/> 推/管金额
						        							</view>
						        						</view>
						        					</view>
						        								<view class="dsd_div_li">
						        						<view class="dsd_div_li_box">
						        							<view class="dsd_div_li_box_tit">
						        								独立结算价
						        							</view>
						        							<view class="dsd_div_li_box_span">
						        						每个产品设有  <br/> 联盟差价
						        							</view>
						        						</view>
						        					</view>
						        								<view class="dsd_div_li" style="border:none">
						        						<view class="dsd_div_li_box">
						        							<view class="dsd_div_li_box_tit">
						        							潮联盟月工资
						        							</view>
						        							<view class="dsd_div_li_box_span">
						        					每个等级200 奖励/月
						        							</view>
						        						</view>
						        					</view>
						        				</view>
						        				
						        				<view class="dhd_span">
						        					<image src="../../static/startt.png" mode="widthFix"></image>
						        					注：每上升一级则涨200，最高每月可拿1800元
						        				</view>
						        				
						        			</view>
											
						   </view>
					   </view>
		<!-- 潮人联盟end -->
		<!-- 潮人权益start -->
		<view class="label">
		       <view class="label_left">
		         <image src="../../static/b2.png" mode="widthFix"></image>
		         </view>
		       </view>
			     <view class="list_item">
			             <view class="list_item_li">
			               <view class="list_item_a">
			                 <view class="list_item_left">
			                   <image src="../../static/sm1.png" mode="widthFix"></image>
			                   </view>
			                   <view class="list_item_right">
			                       联盟成员即可拥有管理员身份“导师”，可获得本团队的 产品差价+未分出去的推/管金额
			                     </view>
			               </view>
			             </view>
			             <view class="list_item_li">
			               <view class="list_item_a">
			                 <view class="list_item_left">
			                 <image src="../../static/sm2.png" mode="widthFix"></image>
			                   </view>
			                   <view class="list_item_right">
			                       下级成员升级为联盟成员即可获得该下级联盟成员总收益 5%做为雇工资...
			                     </view>
			               </view>
			             </view>
			           </view>
		<!-- 潮人权益end -->
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view  :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data(){
			return{
				topState:false,
				qiedate:['本月','本周','昨日'],
				qie_active:0, //默认本月
				yangqie:['联盟条件','联盟权益','联盟收益'],
				ka_qie_li_active:0,
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		onShow	(){
			//设置微信号
			uni.setClipboardData({
			    data: 'z13238330080', 
			    success: function () {
					uni.hideToast();
			    }
			});
		},
		methods:{
			changeqiedate (index){  //切换日期
				this.qie_active=index;
			},
			getwx (){
				uni.getClipboardData({  //复制微信号
				    success: function (res) {
				        console.log(res.data);
						uni.showToast({
						    title: '复制成功',
						    duration: 2000
						});
				    }
				});
			},
			changeyang (index){
				this.ka_qie_li_active=index;
			},
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #fff;
	}
	.top{
		width:100%;
		padding:30rpx 0;
		background:url(../../static/liantpbg.png) no-repeat;
		background-size:100%;
		padding-bottom:65rpx;
	}
	.top_box{
		width:93%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top_box_left{
		width:20%;
	}
	.tou{
		width:120rpx;
		height:120rpx;
		border-radius: 120rpx;
	}
	.top_box_right{
		width:78%;
		color:#fff;
	}
	.name_box{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.name{
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size:30rpx;
		font-weight: 500;
	}
	.yaoma{
		font-size:23rpx;
	}
	.sle_box{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:10rpx 0;
	}
	.sle_box_left{
		display: flex;
		align-items: center;
	}
	.dengji{
	    background: url(../../static/smxiao.png) no-repeat;
	    background-size: 100%;
		background-position: center;
	    width: 150rpx;
	    height: 60rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.log_a{
		border:1rpx solid #fff;
		border-radius: 100rpx;
		padding:2rpx 10rpx;
		font-size:23rpx;
	}
	.commis_btn{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top:28rpx;
	}
	.commis_btn_left{
		    font-size: 25rpx;
		    color: rgb(255, 128, 192);
		    font-weight: 400;
		    padding: 10rpx 20rpx;
		    background: rgb(255, 255, 255);
		    border-radius: 100rpx;
	}
	.commis_btn_right{
		    font-size: 25rpx;
		    display: inline-block;
		    padding: 10rpx 20rpx;
		    background: #ff79bd;
		    color: #fff;
		    border-radius: 100rpx;
		    font-weight: 300;
	}
	.gai_tp{
		    width: 90%;
		    padding: 5rpx 20rpx;
		    border-radius: 100rpx;
		    border: 4rpx solid #ff80c0;
		    overflow: hidden;
		    display: flex;
		    align-items: center;
		    justify-content: flex-start;
		    white-space: nowrap;
		    font-size: 22rpx;
		    margin: -40rpx auto 0;
		    background: #fff;
	}
	.gai_tp_img{
		width:80rpx;
	}
	.gai_nav_a{
		color:rgb(255, 128, 192);
		margin-left:5rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.tpjian_img{
		width:45rpx;
		margin:0 10rpx;
	}
	.navloa_ul{
		width:95%;
		display: flex;
		margin:20rpx auto;
		justify-content: flex-start;
		align-items: center;
	}
	.navloa_li{
		flex:1;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.navloa_img{
		width:100rpx;
	}
	.navloa_text{
		width:100%;
		text-align: center;
		font-size: 24rpx;
	}
	.bga_img_a{
		width:95%;
		margin:20rpx auto;
	}
	.bga_img{
		width:100%;
	}
	
	.label{
	  width: 93%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	   margin: 10rpx auto;
	}
	.label_left{
	  width:35%;
	  display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.label_left image{
	  width:100%;
	}
	.label_right{
	  width:40%;
	  display: flex;
	    justify-content:space-between;
	    align-items: center;
	}
	.label_right_ul{
	  width:100%;
	  display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.label_li{
	  width:30%;
	  text-align:center;
	}
	.qie{
	  display: inline-flex;
	  width: 100%;
	  height: 100%;
	  border-radius: 100rpx;
	  font-size: 24rpx;
	  font-weight: 400;
	  justify-content: space-around;
	  align-items: center;
	  padding:5rpx 10rpx;
	}
	.qie_active{
	    background: #ffcce6;
	}
	.qian_box{
	  width:95%;
	  margin:40rpx auto;
	}
	.qian_box_tit{
	  width: 100%;
	text-align: center;
	font-size: 34rpx;
	margin: 10rpx 0;
	color: #000;
	letter-spacing: 5rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-weight: 500;
	position: relative;
	}
	.jmsl{
		background-color:#ffcce6;
		font-size:25rpx;
		border-radius: 100rpx; 
		 padding:8rpx 20rpx;
		 position: absolute;
		 right:5rpx;
		 top:0;
	}
	.qian_box_tit2{
	      color: #fe4f95;
	      font-size: 55rpx;
	      font-weight: 700;
	      font-family: serif;
	}
	.qian_box_ul{
	  width:100%;
	  display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:20rpx;
	}
	.qian_box_li{
	  width:33%;
	  height:90rpx;
	  display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	}
	.qian_box_li_tit{
	  font-size:28rpx;
	  width:100%;
	  text-align:center;
	}
	.qian_box_li_span{
	  color: #e977a5;
	  width:100%;
	  text-align:center;
	  font-size: 40rpx;
	  font-family: serif;
	  margin-top:10rpx;
	}
	.slide_ul{
	  width:95%;
	  margin:30rpx auto 20rpx;
	  display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.slide_li{
	  width:48.5%;
	  height:130rpx;
	  display: flex;
	    justify-content: space-around;
	    align-items: center;
	}
	.slide_ul_a{
	  width:100%;
	  height:130rpx;;
	  display: flex;
	    justify-content: space-around;
	    align-items: center;
	}
	.slide_ul_div{
	  width: 85%;
	      height: 60%;
	      display: flex;
	      flex-wrap: wrap;
	      justify-content: flex-start;
	      align-items: center;
	      color: #fff;
	      margin-top: -10rpx;
	}
	.slide_ul_div_tit{
	  width:100%;
	  font-size: 28rpx;
	}
	.slide_ul_div_span{
	width:100%;
	font-size: 22rpx;
	font-weight:200;
	}
	.slide_ul_a1{
	  background:url(../../static/slide1.png) no-repeat;
	  background-size:100%;
	}
	.slide_ul_a2{
	  background:url(../../static/slide2.png) no-repeat;
	  background-size:107%;
	}
	.ka_box{
		width: 93%;
	    height: 120rpx;
	    border-radius: 100rpx;
	    margin: 25rpx auto;
	    box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	}
	.ka_ul{
		width:72%;
	    margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ka_li{
		    display: flex;
	    align-items: center;
	}
	.ka_li_span{
		display: inline-block;
		width:15rpx;
		height:15rpx;
		border:5rpx solid #fe4f95;
		border-radius: 100rpx;
	}
	.ka_li_div{
		width:180rpx;
		height:3rpx;
		background: #ccc;
		margin-left:20rpx;
	}
	.ka_qie_ul{
		width:88%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:15rpx auto 0;
	}
	.ka_qie_li{
		width:20%;
		color:#777;
		font-size:28rpx;
		font-weight: 500;
		display: flex;
		padding:5rpx 20rpx;
		border-radius: 100rpx;
		justify-content: space-around;
	}
	.ka_qie_li_active{
		background: #fe4f95;
		color:#fff;
	}
	
	.ka_box_huan{
		width:93%;
		margin:0 auto;
	}
	.ka_box_huan_label{
		width:90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:20rpx auto 15rpx;
	}
	.jds{
	    font-weight: 500;
	    color:#444;
		font-size:30rpx;
	}
	.bof{
		    background: #ffcce6;
		     border-radius: 100rpx;
	    font-size: 24rpx;
	    font-weight: 400;
	    padding: 5rpx 20rpx;
	    color:#666;
	}
	.dfd_ul{
		width:90%;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		    padding-bottom: 10rpx;
	    border-bottom: 2rpx solid #ccc;
	    padding-left:5%;
	    padding-right:5%;
	}
	.dfs_li{
		width:30%;
		color:#777;
		font-size:24rpx;
	}
	.dh_color{
		font-size:24rpx;
		  font-weight: 500;
		  color:#fe4f95;
	}
	.deefd{
		width:93%;
		padding:15rpx;
		border-radius: 100rpx;
		background: #ffe2f0;
		text-align: center;
		color:#777;
		margin:10rpx auto 20rpx;
	}
	.list_item{
	  width:95%;
	  margin:0 auto;
	  padding-bottom:20rpx;
	}
	.list_item_li{
	  width:100%;
	  height:80rpx;
	  display: flex;
	    justify-content: space-between;
	    align-items: center;
		margin-top:15rpx;
	}
	.list_item_a{
	  display: flex;
	    justify-content: space-between;
	    align-items: center;
	    width:100%;
	    height:80rpx;
	}
	.list_item_left{
	  width:20%;
	  height:100%;
	  display: flex;
	    justify-content: space-around;
	    align-items: center;
	}
	.list_item_left image{
	  width:90%;
	  object-fit:cover;
	  border-radius: 20rpx;
	}
	.list_item_right{
	  width:78%;
	  height:100%;
	  display: flex;
	    justify-content:flex-start;
	    align-items: center;
	    color: #333;
	font-size: 22rpx;
	overflow: hidden;
	}
	
	.dc_label{
		width:98%;
		display: flex;
		margin:20rpx auto;
		align-items: center;
		justify-content: flex-start;
		color:#555;
		font-size:33rpx;
		font-weight:500;
	}
	.dw_span{
		display: inline-block;
		width:8rpx;
		height:40rpx;
		background: #fe4f95;
		margin-right:20rpx;
	}
	.dc_ul{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dc_li{
		width:31.5%;
		height:150rpx;
		padding:15rpx 0;
		box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    border-radius: 15rpx;
	    display: flex;
	    justify-content: space-around;
	    flex-wrap:wrap;
	    align-items: center;
	}
	.dc_li_tit{
		color:#fe4f95;
		font-size:28rpx;
		white-space: nowrap;
	}
	.dc_li_span{
		width:100%;
		text-align: center;
		font-size:21rpx;
		color:#777;
		white-space: nowrap;
	}
	.cv_img{
		width:60%;
	}
	.dfc_ul{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	    border-bottom: 2rpx solid #ccc;
	}
	.dfc_li{
		width:100%;
		height:90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dfc_li_left{
		width:25%;
		height:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.dfc_li_left image{
		width:60rpx;
	}
	.dfc_li_right{
		width:75%;
		height:100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap:wrap;
		align-items: center;
	}
	.dfc_li_right_tit{
		width:100%;
		color:#444;
		font-size:27rpx;
		font-weight: 500;
	}
	.dfc_li_right_span{
			width:100%;
			color:#777;
		font-size:23rpx;
	}
	.jy_ul{
	    width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.jy_li{
		width:31.5%;
		height:120rpx;
		padding:20rpx 0;
		box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    border-radius: 15rpx;
	    display: flex;
	    justify-content: space-around;
	    flex-wrap:wrap;
	    align-items: center;
	}
	.jy_tit{
		width:100%;
		text-align: center;
		font-size:22rpx;
	}
	.jy_span{
		color:#fe4f95;
		font-size:22rpx;
	}
	
	.fvds{
		width:100%;
		box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    border-radius: 15rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.fvds_box{
		width:90%;
		height:100%;
	}
	.fvds_box_top{
		width:100%;
		padding:20rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2rpx solid #ccc;
	}
	.fvds_box_top_left{
		width:25%;
		height:75%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.fvds_box_top_right{
		width:60%;
		padding-left:10%;
		height:100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.fewf{
		width:100%;
		display: flex;
	
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
	}
	.fcvd{
		display: inline-block;
		width:15rpx;
		height:15rpx;
		background:#fe4f95 ;
		border-radius: 100rpx;
		margin-right:15rpx;
	}
	.fvds_box_top_left_tit{
		color:#fe4f95;
		width:100%;
		text-align: center;
		font-weight:500;
		font-size:28rpx;
	}
	.fvds_box_top_left_span{
		width:100%;
		text-align: center;
	}
	.dhsb{
		width:94%;
		padding:3%;
		box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    border-radius: 15rpx;
	    letter-spacing: 5rpx;
	    font-size:24rpx;
	}
	.dhsb_span{
		color:#fe4f95;
	}
	
	.asd_div{
		width:93%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx 0;
		margin:0 auto;
	}
	.asd_div_left,.asd_div_right{
		width:47%;
		height:130rpx;
	    box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    border-radius: 15rpx;
	}
	.asd_div_left_left{
		justify-content: space-around;
		width:28%;
		height:100%;
		align-items: center;
		display: flex;
	}
	.asd_div_right_right{
		display: flex;
		flex-wrap:wrap;
		width:72%;
		height:50%;
	    align-items: center;
	    
	}
	.asd_div_left_left image{
		width:55rpx;
	}
	.asd_div_right_right_tit{
		width:100%;
		font-size:26rpx;
		font-weight: 500;
	}
	.asd_div_right_right_span{
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size:22rpx;
		color:#777;
	}
	
	.dsd_div{
		width:93%;
		margin:0 auto;
		 box-shadow: 4rpx 4rpx 20rpx #ccc;
	    border: 2rpx solid #ccc;
	    border-radius: 15rpx;
	    height:215rpx;
	    
	}
	.dsd_div_ul{
		width:100%;
		margin:30rpx auto;
		height:100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dsd_div_li{
		width:25%;
		height:100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-right: 2rpx solid rgb(204, 204, 204);
	}
	.dsd_div_li_box{
		width:85%;
		height:100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		align-items: center;
	}
	.dsd_div_li_box_tit{
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
	    font-size: 24rpx;
	    text-align: center;
	}
	.dsd_div_li_box_span{
		width: 100%;
	    font-size: 22rpx;
	    color:#fe4f95;
	    text-align: center;
		margin-top:5rpx;
	}
	.dhd_span{
		width:90%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    font-size: 22rpx;
	      color:#777;
	}
	.dhd_span image{
		width:25rpx;
		margin-right:10rpx;
	}
</style>
